<template>
	<gracePage :customHeader="false">
		<view slot="gBody">
			<view class="grace-space-between grace-flex-vcenter grace-h4" style="padding: 30rpx;">
				<text class="grace-black9 grace-bold">头像</text>
				<view class="grace-flex grace-flex-vcenter grace-h4" @click="updateAvatar">
					<image :src="userpic" mode="aspectFill" lazy-load style="width: 100rpx;height: 100rpx;border-radius: 100%;"></image>
					<text class="icon iconfont icon-bianji1 grace-black9" style="margin-left: 20rpx;"></text>
				</view>
			</view>
			<view class="grace-space-between grace-flex-vcenter grace-h4" style="padding: 30rpx;">
				<text class="grace-black9 grace-bold">昵称</text>
				<view class="grace-flex grace-flex-vcenter grace-h4">
					<input style="text-align: right;" type="text" v-model="username" />
					<text class="icon iconfont icon-bianji1 grace-black9" style="margin-left: 20rpx;"></text>
				</view>
			</view>
			<view class="grace-space-between grace-flex-vcenter grace-h4" style="padding: 30rpx;">
				<text class="grace-black9 grace-bold">性别</text>
				<view class="grace-flex grace-flex-vcenter grace-h4" @click="changeOne('sex')">
					<text>{{ sexArr[sex] }}</text>
					<text class="icon iconfont icon-bianji1 grace-black9" style="margin-left: 20rpx;"></text>
				</view>
			</view>
			<view class="grace-space-between grace-flex-vcenter grace-h4" style="padding: 30rpx;">
				<text class="grace-black9 grace-bold">生日</text>
				<picker mode="date" :value="birthday" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="grace-flex grace-flex-vcenter grace-h4">
						<text>{{ birthday }}</text>
						<text class="icon iconfont icon-bianji1 grace-black9" style="margin-left: 20rpx;"></text>
					</view>
				</picker>
			</view>
			<view class="grace-space-between grace-flex-vcenter grace-h4" style="padding: 30rpx;">
				<text class="grace-black9 grace-bold">情感</text>
				<view class="grace-flex grace-flex-vcenter grace-h4" @click="changeOne('qg')">
					<text>{{ qgArr[qg] }}</text>
					<text class="icon iconfont icon-bianji1 grace-black9" style="margin-left: 20rpx;"></text>
				</view>
			</view>
			<view class="grace-space-between grace-flex-vcenter grace-h4" style="padding: 30rpx;">
				<text class="grace-black9 grace-bold">职业</text>
				<view class="grace-flex grace-flex-vcenter grace-h4" @click="changeOne('job')">
					<text>{{ job }}</text>
					<text class="icon iconfont icon-bianji1 grace-black9" style="margin-left: 20rpx;"></text>
				</view>
			</view>
			<view class="grace-space-between grace-flex-vcenter grace-h4" style="padding: 30rpx;">
				<text class="grace-black9 grace-bold">家乡</text>
				<view class="grace-flex grace-flex-vcenter grace-h4" @click="open">
					<text>{{ pickerText }}</text>
					<text class="icon iconfont icon-bianji1 grace-black9" style="margin-left: 20rpx;"></text>
				</view>
			</view>
			<button type="primary" @click="submit">完成</button>
			<graceAddressPicker :show="show" @confirm="confirm" @close="close"></graceAddressPicker>
		</view>
	</gracePage>
</template>

<script>
var graceJS = require('@/Grace.JS/grace.js');
let sexArr = ['不限', '男', '女'];
let qgArr = ['秘密', '未婚', '已婚'];
let job = ['秘密', 'IT', '老师'];
export default {
	data() {
		return {
			sexArr: sexArr,
			qgArr: qgArr,
			userpic: '/static/demo/userpic/6.jpg',
			username: '哈哈',
			sex: 0,
			qg: 0,
			job: 'IT',
			birthday: '2019-03-18',
			cityPickerValueDefault: [0, 0, 1],
			pickerText: '广东省-广州市-天河区',
			show:false
		};
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	methods: {
		updateAvatar() {
			graceJS.chooseImgs({}, e => {
				this.userpic = e;
			});
		},
		// 修改生日
		bindDateChange(e) {
			this.birthday = e.target.value;
		},
		// 单列选择
		changeOne(val) {
			let arr = [];
			switch (val) {
				case 'sex':
					arr = sexArr;
					break;
				case 'qg':
					arr = qgArr;
					break;
				case 'job':
					arr = job;
					break;
			}
			uni.showActionSheet({
				itemList: arr,
				success: res => {
					switch (val) {
						case 'sex':
							this.sex = res.tapIndex;
							break;
						case 'qg':
							this.qg = res.tapIndex;
							break;
						case 'job':
							this.job = arr[res.tapIndex];
							break;
					}
				}
			});
		},
		open() {
			this.show = true;
		},
		confirm(e) {
			// 返回选中城市的编号及文本信息
			this.pickerText = e.names[0] + '-' + e.names[1] + '-' + e.names[2];
			this.close();
		},
		close() {
			this.show = false;
		},
		submit(){
			
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		}
	}
};
</script>

<style lang="stylus">
button
	width 90%
	margin 30rpx auto
	color #333333 !important
	background #FFE934 !important
</style>
